<!-- 基础信息模块 -->
<script setup lang="jsx">
const basicInfo = defineModel('basicInfo', { type: Object, default: () => ({}) });

const infoList = [
  {
    key: 'moduleNo',
    label: '生产型号',
    icon: 'icon-shengchanxinghao',
    color: '#0958d9',
    background: '#e6f4ff'
  },
  {
    key: 'lotId',
    label: '生产批次',
    icon: 'icon-picihao',
    color: '#0958d9',
    background: '#e6f4ff'
  },
  {
    key: 'petype',
    label: '产品类型',
    icon: 'icon-pnlshuliang',
    color: '#0958d9',
    background: '#e6f4ff'
  },
  {
    key: 'prodOrderNo',
    label: '工单号',
    icon: 'icon-gongdanhao',
    color: '#0958d9',
    background: '#e6f4ff'
  },
  {
    key: 'intoStorage',
    label: '入库数量',
    icon: 'icon-rukuxinxi',
    color: '#0958d9',
    background: '#e6f4ff'
  },

  {
    key: 'custName',
    label: '客户全称',
    icon: 'icon-kehumingcheng',
    color: '#08979c',
    background: '#e6fffb'
  },

  {
    key: 'custProdNo',
    label: '客户型号',
    icon: 'icon-kehuxinghao',
    color: '#08979c',
    background: '#e6fffb'
  },
  {
    key: 'custNo',
    label: '客户代码',
    icon: 'icon-kehubianma',
    color: '#08979c',
    background: '#e6fffb'
  },

  {
    key: 'orderNo',
    label: '订单号',
    icon: 'icon-dingdanhao',
    color: '#08979c',
    background: '#e6fffb'
  },

  {
    key: 'outbound',
    label: '出库数量',
    icon: 'icon-baozhuangshengchanjilubiao',
    color: '#08979c',
    background: '#e6fffb'
  }
];
</script>

<template>
  <div class="basic-information">
    <ACard size="small">
      <template #title>
        <div class="card-title">基础信息</div>
      </template>
      <div class="card-body">
        <div class="left">
          <div class="img">
            <svg
              t="1733459296091"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="7309"
              width="50"
              height="50"
            >
              <path
                d="M510.59 128.93a151 151 0 1 1-106.77 44.23 150 150 0 0 1 106.77-44.23m0-64c-118.74 0-215 96.26-215 215s96.26 215 215 215 215-96.26 215-215-96.26-215-215-215zM689.4 577.63c45.17 0 88.09 19.48 120.85 54.85A195.25 195.25 0 0 1 848.69 694 207.12 207.12 0 0 1 863 770.17v62.7c0 17.93-6.33 34.64-17.83 47.05-5.93 6.4-18.61 17.15-36.9 17.15H215.74c-18.29 0-31-10.74-36.9-17.15-11.5-12.42-17.84-29.13-17.84-47.05v-62.7A207.12 207.12 0 0 1 175.31 694a195.25 195.25 0 0 1 38.44-61.51c32.76-35.37 75.67-54.85 120.85-54.85h30.86l90.61 98a76 76 0 0 0 111.48 0.15l91.23-98.16h30.62m0-64h-53.29a12 12 0 0 0-8.79 3.83L520.67 632.23a12 12 0 0 1-17.6 0L397 517.49a12 12 0 0 0-8.81-3.85H334.6C203.92 513.63 97 629.07 97 770.17v62.7c0 70.51 53.43 128.2 118.74 128.2h592.52c65.3 0 118.74-57.69 118.74-128.2v-62.7c0-141.09-106.92-256.53-237.6-256.53z"
                fill="#646cff"
                p-id="7310"
              ></path>
            </svg>
          </div>
          <div class="name min-h-26px">{{ basicInfo.custab }}</div>
        </div>
        <!--
 <ARow :gutter="[20, 15]" class="info">
          <ACol v-for="item in infoList" :key="item.key" class="info-item" :span="6">
            <div class="icon">
              <div class="icon-warp" :style="{ background: item.background }">
                <span class="iconfont" :class="item.icon" :style="{ color: item.color }"></span>
              </div>
            </div>
            <div class="data">
              <div class="label">{{ item.label }}</div>
              <div class="value">{{ basicInfo[item.key] }}</div>
            </div>
          </ACol>
        </ARow>
-->
        <div class="info">
          <div v-for="item in infoList" :key="item.key" class="info-item">
            <div class="icon">
              <div class="icon-warp" :style="{ background: item.background }">
                <span class="iconfont" :class="item.icon" :style="{ color: item.color }"></span>
              </div>
            </div>
            <div class="data">
              <div class="label">{{ item.label }}</div>
              <div class="value">{{ basicInfo[item.key] }}</div>
            </div>
          </div>
        </div>
      </div>
    </ACard>
  </div>
</template>

<style scoped lang="scss">
.basic-information {
  padding: 5px 0;
  .card-title {
    display: flex;
    align-items: center;
    &:before {
      content: '';
      display: inline-block;
      vertical-align: middle;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #646cff;
      margin-right: 5px;
    }
  }
  .card-body {
    display: flex;
    justify-content: space-between;
    .left {
      width: 220px;
      background: #646cff;
      border-radius: 10px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: 10px;
      .img {
        padding: 5px;
        width: 50px;
        height: 50px;
        box-sizing: content-box;
        border-radius: 50%;
        background: #fff;
      }
      .name {
        width: 100%;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        margin-top: 5px;
      }
    }
    .info {
      width: calc(100% - 220px);
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      .info-item {
        padding-left: 15px;
        display: flex;
        width: calc(20% - 15px);
        .icon {
          display: flex;
          align-items: center;
          margin-right: 15px;
          .icon-warp {
            width: 32px;
            height: 32px;
            text-align: center;
            line-height: 32px;
            border-radius: 6px;
            background: #646cff;
          }
        }

        .data {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          .label {
            width: 100%;
            color: #aeaeae;
            font-weight: bold;
          }
          .value {
            width: 100%;
          }
        }
      }
    }

    .materiel-info {
      display: flex;
    }
  }
}
</style>
